<!doctype html>
<html lang="en-US">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>列表页 - 华平投资</title>
  <link rel="shortcut icon" type="image/x-ico" href="favicon.ico" />
  <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/iconfont.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/app.min.css" type="text/css" media="all" />
</head>

<body class="home fixed-nav">
  <div id="app">
    <header class="banner">
      <div class="navbar navbar-expand-xl">
        <a class="navbar-brand" href="index.html">Warburg Pincus</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="menu-1" aria-expanded="false"
          aria-label="Toggle navigation" data-target="#menu-1">
          <svg viewBox="0 0 800 600">
            <path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" id="top">
            </path>
            <path d="M300,320 L540,320" id="middle"></path>
            <path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" id="bottom"
              transform="translate(480, 320) scale(1, -1) translate(-480, -318) "></path>
          </svg>
        </button>
        <div class="navbar--container collapse" id="menu-1">
          <ul class="nav">
            <li class="menu-item">
              <a title="Home Page" href="index.html">Home Page<span>首页</span></a></li>
          </ul>
        </div>
      </div>
    </header>
    <div class="wrap">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <p class="h3 text-primary mt-5" v-text="obj.categoryNameEn"></p>
            <p class="h3 text-primary" v-text="obj.categoryName"></p>

            <data-list :o="obj.nodes" :ishead="true"></data-list>

          </div>
        </div>

      </div><!-- /.content -->
    </div><!-- /.wrap -->
    <footer class="content-info">
      <p>© 2020 Warburg Pincus LLC. 版权所有。</p>
    </footer>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/app.js"></script>
  <script src="js/vue.js"></script>
  <script>
    Vue.component('data-ul', {
      props: ['id','p'],
      data: function () {
      return {
          objs: []
        }
      },
      template: `
        <ul class="list">
          <li v-for="o in objs">
            <a v-if="!o.link" :href="'viewpdf.html?src='+ o.file" v-text="o.title"></a>
            <a v-else :href="o.link" v-text="o.title"></a>
          </li>
          <data-list v-if="p.nodes!=null && p.nodes.length>0" :o='p.nodes' :ishead="false"></data-list>
        </ul>  
      `,
      created: function () {
        this.getlist();
      },
      methods:{
        getlist: function () {
          var self = this;
          $.ajax({
            url: '/api/dm/list',
            type: 'post',
            data: {
              cid: this.id
            },
            dataType: 'json'
          }).then(function (res) {
            if (res.code == 500) {
              location.href = "login.html";
              return;
            }
            self.objs = res.data;

          }).fail(function () {
            console.log('失败');
          })
        },
        getQueryString: function (name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
          var r = window.location.search.substr(1).match(reg);
          if (r != null) return unescape(r[2]); return null;
        }
      }
    })
    Vue.component('data-list', {
      props: ['o','ishead'],
      template: `
        <div>
            <div v-for="i in o">
                <p  v-if="ishead" class="listtitle text-primary" v-text="i.categoryNameEn + '  ' + i.categoryName"></p>
                <p  v-else class="listtitle text-primary" v-text="i.categoryNameEn + '  ' + i.categoryName" style="font-size: 1.0rem;"></p>

                <data-ul :id="i.categoryId" :p="i"></data-ul>
            </div>
        </div>
      `
    });

    var v = new Vue({
      el: '#app',
      data: {
        obj: {}
      },
      created: function () {
        this.getlist();
      },
      watch: {
        obj: function () {
          this.$nextTick(function () {
            /*现在数据已经渲染完毕*/
            this.initlist();
          })
        }
      },
      methods: {
        initlist: function () {

        },
        getQueryString: function (name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
          var r = window.location.search.substr(1).match(reg);
          if (r != null) return unescape(r[2]); return null;
        },
        getlist: function () {
          var self = this;
          $.ajax({
            url: '/api/category/list',
            type: 'get',
            data: {},
            dataType: 'json'
          }).then(function (res) {
            if (res.code == 500) {
              location.href = "login.html";
              return;
            }

            //数据树建立
            var objs = res.data;

            //找到参数id对应的类
            var obj;
            for (i in objs) {
              if (objs[i].categoryId == self.getQueryString('id')) {
                obj = objs[i];
                obj.nodes = [];
                break;
              }
            }
            self.settree(objs, obj);
            console.log(obj);
            self.obj = obj;

          }).fail(function () {
            console.log('失败');
          })
        },
        settree: function (objs, obj) {

          for (i in objs) {
            var one = objs[i];
            if (one.parentId == obj.categoryId) {
              one.nodes = [];
              obj.nodes.push(one);
              this.settree(objs, one);

            }
          }

        }
      }
    });

  </script>
</body>

</html>